<template>
<div class="container">
    <div class="header">
        <NavBar title="运费预估" left-arrow color='#333333' @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size='20' />
            </template>
        </NavBar>
    </div>
    <div class="main">
        <div class="adress-box">
            <Address @addressChange='addressChange'></Address>
        </div>
        <div class="c-box">
            <Boxtype v-model='id'></Boxtype>
        </div>
        <div class="c-box">
            <Boxweight v-model='weight'></Boxweight>
        </div>
        <div class="box-weight">
            <div class="title">预估体积 <span>(cm³)</span> </div>
            <div class="box-weight-bottom flex align-items space-between">
                <input class="ipt" type="number" v-model='long' placeholder="长（cm）">
                <input class="ipt" type="number" v-model='width' placeholder="宽（cm）">
                <input class="ipt" type="number" v-model='height' placeholder="高（cm）">
            </div>
        </div>
         <!-- <div class="box-weight">
            <div class="title">预估宽度 <span>(cm)</span> </div>
            <input class="ipt" type="number" v-model='width' placeholder="请输入预估宽度">
        </div>
        <div class="box-weight">
            <div class="title">预估高度 <span>(cm)</span> </div>
            <input class="ipt" type="number" v-model='height' placeholder="请输入预估高度">
        </div> -->
        <div class="box-weight" @click='toWalletInfo'>
            <div class="info-desc flex align-items flex-start"><i class="iconfont iconxinxi"></i>估算说明 ></div>
        </div>
        <div class="btn-box">
            <Button type="info" block @click='submit'>查询运费</Button>
        </div>
    </div>
    <ActionSheet v-model="show" title="运费时效">
        <div class="layer-content">
            <div class="top flex align-items space-between">
                <div class="left flex1">
                    <div class="address fn-ctr">
                        <div class="cirle"></div>
                        <span>曼谷普通货</span>
                    </div>
                    <div class="yu-money">预估运费： <span>¥{{ resultData.money }}</span> </div>
                    <div class="yu-time">预计运送时长{{ resultData.day }}天</div>
                </div>
                <img :src="baoguoPic" alt="" class="right">
            </div>
            <div class="bottom">
                <Button type="info" block @click='toJijian'>去寄件</Button>
            </div>
        </div>
    </ActionSheet>
</div>
</template>

<script>
import {
    NavBar,
    Icon,
    Button,
    ActionSheet,
    Toast,
} from 'vant';
import {
    ficNewPrice
} from '@/model/api';
import Address from '@/components/Address/Address'
import Boxtype from '@/components/Boxtype/Boxtype'
import Boxweight from '@/components/Boxweight/Boxweight'
import baoguoPic from '@/assets/baoguo.png'

export default {
    components: {
        NavBar,
        Icon,
        Address,
        Boxtype,
        Boxweight,
        Button,
        ActionSheet,
    },
    data() {
        return {
            baoguoPic,
            id: "",
            weight: "",
            long:"",
            width:"",
            height:"",
            show: false,
            resultData: {},
            address:{},
        }
    },
    methods: {
        //选择地址变化事件
        addressChange(address){
            this.address = address;
        },
        async submit() {
            if (!this.weight) {
                this.$toast({
                    message: "请输入重量",
                    type: "fail"
                });
                return false
            }
            // Toast.loading({
            //     message: '加载中...',
            //     forbidClick: true,
            //     loadingType: 'spinner',
            //     duration:3000,
            // })
            let {
                code,
                data,
                msg,
            } = await ficNewPrice({
                category_id: this.id,
                weight: this.weight,
                long:this.long,
                width:this.width,
                height:this.height,
                address_id:this.address.id,
            })
            if (code == 1) {
                this.resultData = data;
                this.show = true;
            } else {
                this.$toast(msg);
            }
        },
        toJijian() {
            this.$router.push({
                name: "createorder"
            })
        },
        toWalletInfo(){
            this.$router.push({
                name:"atricle",
                query:{
                    mode:7,
                }
            })
        },
    },
    created() {

    },

}
</script>

<style lang="less" scoped>
.c-box {
    margin-top: 5px;
}
.main{
    padding-bottom: 55px;
}
.btn-box {
    width: 100%;
    height: auto;
    padding: 0 14px 10px;
    position: fixed;
    left: 0;
    bottom: 0;
}
.info-desc{ 
     font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    .iconfont{
        margin-right: 5px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #5652FF;
        position: relative;
        top: 2px;
    }
}
.layer-content {
    width: 100%;
    padding: 0 14px 10px;

    .top {
        width: 100%;
        padding: 15px 0;
        border-top: 1px solid #eee;

        .right {
            width: 110px;
            height: 105px;
            margin-right: 41px;
        }

        .left {
            .address {
                width: 100%;

                .cirle {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #5652FF;
                }

                span {
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    margin-left: 10px;
                }
            }

            .yu-money {
                width: 100%;
                text-align: center;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                margin: 10px 0;

                span {
                    color: #FF5522;
                    font-weight: bold;
                }
            }

            .yu-time {
                width: 100%;
                text-align: center;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
            }
        }
    }
}
.box-weight {
    width: 100%;
    background-color: #fff;
    padding: 0 14px 15px;

    .title {
        width: 100%;
        padding: 19px 0 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;

        span {
            font-size: 12px;
            color: #999999;
        }
    }

    .ipt {
        width: 30%;
        height: 33px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333;
        border-bottom: 1px solid #EEEEEE;
        text-align: center;
    }

    .ipt::placeholder {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #CCCCCC;
    }
}
</style>
